@charset "utf-8";
html{height:100%;color:#646464;font-size:14px}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
li,dd,.il{display:inline-block;vertical-align:top}
body,button,input,select,textarea{font:12px/1.5 "\5FAE\8F6F\96C5\9ED1","Microsoft Yahei","Hiragino Sans GB",tahoma,arial,"\5B8B\4F53", Helvetica}
input,select,textarea{font-size:100%}
fieldset,img{border:0}
iframe{display:block}
abbr,acronym{border:0;font-variant:normal}
del{text-decoration:line-through}
i{font-style:normal}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-weight:500;color:#000}
h1{font-size:24px}
h2{font-size:16px}
h3,h4,h5,h6{font-size:14px}
q:before,q:after{content:''}
sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
ins,a{text-decoration:none}
a,span,li{-webkit-transition:color .3s,background .3s;-moz-transition:color .3s,background .3s;-o-transition:color .3s,background .3s}
a{color:#646464}
a:hover{color:#2d78aa}
body {height:100%;box-sizing:border-box;position:relative}


[id^="checkbox-1-"] + label {
    background-color: #FFF;padding: 9px;border-radius: 5px;display: inline-block;position: relative;width: 45px;box-shadow: 0 0 1px rgba(0,0,0,0.6);height: 10px
}
[id^="checkbox-1-"] + label:before {
    content: ' ';position: absolute;background: white;top: -1px;z-index: 99999;left: -1px;width: 21px;height: 30px;border-radius: 3px;box-shadow: 0 0 1px rgba(0,0,0,0.6), inset 0 -18px 15px -10px rgba(0,0,0,0.05);
}
[id^="checkbox-1-"] + label:after {
    position: absolute;top: 7px;left: 32px;font-size: 1.2rem;line-height:120%;color: #868686;
}
[id^="checkbox-1-"]:checked + label {
    background: #0c9;box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1), 0 0 10px rgba(146, 196, 245, 0.4);
}
[id^="checkbox-1-"]:checked + label:after {
    left: 8px;color: #fff;
}
[id^="checkbox-1-"]:checked + label:before {
    content: ' ';position: absolute;z-index: 99999;left: 44px;
}
#checkbox-1-1 + label:before {width: 21px;height: 24px;top: 2px;left: 2px}
#checkbox-1-1:checked + label:before {left: 40px}
#checkbox-1-1 + label:after, #checkbox-1-1 + label:before{-webkit-transition: all 0.1s ease-in;transition: all 0.1s ease-in}

.rect{
    background:
            linear-gradient(to left, rgba(255,255,255,.8), rgba(255,255,255,.8)) left top,
            linear-gradient(to bottom, rgba(255,255,255,.8), rgba(255,255,255,.8)) left top,
            linear-gradient(to left, rgba(255,255,255,.8), rgba(255,255,255,.8)) right top,
            linear-gradient(to bottom, rgba(255,255,255,.8), rgba(255,255,255,.8)) right top,
            linear-gradient(to left, rgba(255,255,255,.8), rgba(255,255,255,.8)) left bottom,
            linear-gradient(to bottom, rgba(255,255,255,.8), rgba(255,255,255,.8)) left bottom,
            linear-gradient(to left, rgba(255,255,255,.8), rgba(255,255,255,.8)) right bottom,
            linear-gradient(to left, rgba(255,255,255,.8), rgba(255,255,255,.8)) right bottom;
    background-repeat: no-repeat;
    background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px;
}